<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getUserCount, getArticleCount, getCommontCount } from '../../api/home'
import { lineOption, areaOption, radarOption, categoryOption } from './config'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

const userCount = ref(0)
const userChartsData = ref<{ value: number; date: string }[]>([])
const getUserCounts = async () => {
   const res = await getUserCount()

   userCount.value = res.data.count
   userChartsData.value = res.data.userCountsByDay.map((item) => {
      return {
         value: item._count,
         date: dayjs(item.createdAt).format('YYYY-MM-DD')
      }
   })
}

const articleCount = ref(0)
const articleChartsData = ref<{ value: number; date: string }[]>([])
const getArticleCounts = async () => {
   const res = await getArticleCount()

   articleCount.value = res.data.count
   articleChartsData.value = res.data.articleCountsByDay.map((item) => ({
      date: item.createdAt,
      value: item._count
   }))
}

const commontCount = ref(0)
const getCommontCounts = async () => {
   const res = await getCommontCount()
   commontCount.value = res.data.count
}

const createEcharts = () => {
   const userChart = echarts.init(document.getElementById('user'))
   userChart.setOption(lineOption)

   const articleChart = echarts.init(document.getElementById('article'))
   articleChart.setOption(areaOption)

   const commentCharts = echarts.init(document.getElementById('comment'))
   commentCharts.setOption(radarOption)

   const user1Chart = echarts.init(document.getElementById('user1'))
   user1Chart.setOption(categoryOption)
}

onMounted(async () => {
   await getUserCounts()
   await getArticleCounts()
   await getCommontCounts()
   createEcharts()
})
</script>

<template>
   <div>
      <div class="header p-5 flex justify-around items-center">
         <div class="w-80 h-40 flex justify-around items-center p-5 shadow-xl">
            <div class="left w-14 h-14">
               <img src="../../assets/img/home/user.png" />
            </div>
            <div class="right">
               <div class="titl font-bold text-cyan-900 text-[40rpx]">用户注册量</div>
               <div class="number font-bold">{{ userCount }}</div>
            </div>
         </div>

         <div class="w-80 h-40 flex justify-around items-center p-5 shadow-xl">
            <div class="left w-14 h-14">
               <img src="../../assets/img/home/article.png" />
            </div>
            <div class="right">
               <div class="titl font-bold text-cyan-900 text-[40rpx]">当前文章数量</div>
               <div class="number font-bold">{{ articleCount }}</div>
            </div>
         </div>

         <div class="w-80 h-40 flex justify-around items-center p-5 shadow-xl">
            <div class="left w-16 h-16">
               <img src="../../assets/img/home/message.png" />
            </div>
            <div class="right">
               <div class="titl font-bold text-cyan-900 text-[40rpx]">用户评论数</div>
               <div class="number font-bold">{{ commontCount }}</div>
            </div>
         </div>
      </div>

      <div class="echarts w-full p-8">
         <div id="user" class="w-full h-80"></div>
         <div class="bottom flex justify-around items-center pt-10">
            <div id="article" class="shadow-xl w-96 h-[480px] p-6"></div>
            <div id="comment" class="shadow-xl w-96 h-[480px] p-6"></div>
            <div id="user1" class="shadow-xl w-96 h-[480px] p-6"></div>
         </div>
      </div>
   </div>
</template>
